<template>
    <div class="container-fluid ">
        <TopBar></TopBar>
        <div class="box-bg">
            <div class="left-box">
                <img src="../assets/login_or_reg/favsion.png" alt="PASSLINK.CN">
                <br><br><br>
                <p>PASSLINK
                    <br>
                    <span>{{$t('loginPage.passlink')}}</span>
                </p>
            </div>
            <div class="right-box">
                <div class="blur-bg"></div>
                <div class="input-box">
                    <div>
                        <h3 style="font-weight: bold;">{{$t('loginPage.login')}}</h3>
                        <router-link to="/register">{{$t('loginPage.noCount')}}</router-link>

                    </div>
                    <br>
                    <br>
                    <form>
                        <div>
                            <div class="input-group mb-3">
                                <input type="text" class="form-control" v-model="loginForm.username" :placeholder="$t('loginPage.userName')"
                                    aria-describedby="inputGroup-sizing-default">
                            </div>
                            <div class="input-group mb-3">

                                <input type="password" class="form-control" v-model="loginForm.password" :placeholder="$t('loginPage.password')"
                                    aria-describedby="inputGroup-sizing-default">
                            </div>
                            <div class="input-group mb-3">
                                <input type="text" class="form-control" v-model="loginForm.captcha" :placeholder="$t('loginPage.captcha')"
                                    aria-describedby="button-addon2">
                                <img class="captcha-style" :src="captcha" @click="getCaptch()" alt="验证码" />
                            </div>
                            <div class="d-grid gap-2">

                                <button class="btn btn-primary" @click="login" type="button">{{$t('loginPage.login')}}</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { Md5 } from 'ts-md5';
import { ref, reactive, onMounted } from "vue"
import { AuthStore } from '../store/authStore/index'
import { useRouter } from 'vue-router'
import toast from '../components/Toast/index'
import { authCaptcha, authLogin } from '../api/auth/index'
const router = useRouter() 
const authStore = AuthStore();
const captcha = ref()
const loginForm = reactive({
    "captcha": '',
    "username": '',
    "password": ''
})

//获取图片
async function getCaptch() {
    try {

        const res: any = await authCaptcha()
        captcha.value = res.data.data.captcha

    } catch (error) {
        // 处理错误
        toast.showToast({ msg: "验证码获取错误！！！", type: "error", mask: false })
    }

}

async function login() {
  // 判断是否已登录
  if (authStore.accessToken !==null && authStore.accessToken !== undefined && authStore.accessToken.length>10) {
    router.push({ path: 'biography'})
    return;
  }
    const md5:any = new Md5()
    md5.appendAsciiStr( loginForm.password)
    const hashedPassword =await md5.end()
    loginForm.password = hashedPassword;


  try {
    if (loginForm.captcha.length < 4 || loginForm.password.length < 8 || loginForm.username.length < 4)
     { 
        console.log("提交数据不符合要求！！！");
        getCaptch()
        return;
      }
    let res: any = await authLogin(loginForm);
    loginForm.password = ''
    // 判断是否已登录,存储token
    if (res.data.code == "200") {
      authStore.$patch({
        accessToken: res.data.data.accessToken,
        loginStatus: true,
        tokenType: res.data.data.tokenType
      });
      router.push({ path: 'biography' });

      getCaptch()
    }
  } catch (error) {
    // 处理错误
    console.error("登录请求失败:", error);
  }
}
 //获取图片
getCaptch()
onMounted(() => {
   
})

</script>
<style lang="scss" scoped>
.container-fluid {
    background-color: $passlink-bg-color;
    height: 100vh;
    min-height: 700px;
    display: flex;
    flex-direction: column;
    width: $passlink-center-width;
    .box-bg {
        flex: 1;
        /* 填充剩余空间 */
        background-image: url('../assets/login_or_reg/login.png');
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        margin: auto;
        width: 100%;
        height: fit-content;
        display: flex;

        .left-box {
            position: absolute;
            left: 50px;
            top: 100px;
            width: $passlink-center-width*0.5;
            padding: 20px;
            color: $passlink-font-color-white;

            p {
                text-align: left;
                font-size: $passlink-font-size64;
                font-weight: bold;

                span {
                    font-size: $passlink-font-size32;
                    font-weight: lighter;
                }
            }

            img {
                width: 150px;
                height: 150px;
                margin: auto;
            }
        }

        .right-box {

            width: $passlink-center-width*0.5;
            padding: 20px;
            color: $passlink-font-color-white;

            .blur-bg {
                position: absolute;
                right: 150px;
                top: 100px;
                width: 350px;
                height: 450px;
                background: rgba(253, 252, 252, 0.6);
                box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.1), 16px 16px 50px 0px rgba(255, 255, 255, 0.1), 64px 64px 91px 0px rgba(255, 255, 255, 0.09), 145px 145px 123px 0px rgba(255, 255, 255, 0.05), 257px 257px 146px 0px rgba(255, 255, 255, 0.01), 402px 402px 159px 0px rgba(255, 255, 255, 0);
                filter: blur(20px);
                padding: 10px;


            }

            .input-box {
                position: absolute;
                right: 150px;
                top: 100px;
                width: auto;
                height: 410px;
                padding: 20px;
                background: $passlink-font-color-white2;
                color: $passlink-font-color-black;
                border-radius: 28px;

                .captcha-style {
                    width: 110px;
                    height: auto;
                    background-color: $passlink-font-color-yellow;
                    border-left: 2px $passlink-font-color-black solid;
                    border-radius: 5px;
                }

            }

        }
    }
}
</style>
